<template>
	<transition name="fade">
		<div class='default-wrap'>
			<div class='top-bar' v-if="showTop">
				<div class='back' @click="back">
					<Icon type="chevron-left"></Icon>
				</div>
				
				<div class='title'>
					{{ title }}
				</div>

				<div class="home" @click="goHome">
					<Icon type="ios-home-outline"></Icon>
				</div>
			</div>

			<div class='main'>
				<slot name='body'>
					
				</slot>	
			</div>		
		</div>
	</transition>
</template>

<script>
	export default{
		props: {
			title: {
				type		: String,
				default  	: '刻意练习'
			},
			showTop 		: {
				type        : Boolean,
				default 	: true
			}
		},
		created() {

		},
		methods: {
			back() {
				this.$router.back()
			},
			goHome() {
				this.$router.push('/home/index')
			}
		}
	}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
	@import "~@/common/stylus/variable.styl"
	@import "~@/common/stylus/mixin.styl"
	
	::-webkit-scrollbar
		width: 0
	

	.top-bar
		position: absolute
		left: 0
		top: 0
		right: 0
		display: flex
		padding: 5px
		align-items: center
		background-color: $mc
		color: #fff
		.back, .home
			width: 40px
			height: 40px
			font-size: 20px
			line-height: 40px
			text-align: center
		.title
			flex: 1
			text-align: center
			font-size: 16px
		
					
	.main
		position: absolute
		left: 0
		right: 0
		top: 50px
		bottom: 0
		overflow-y: scroll
		background-color: #f1f1f1
		

	.loading
		position: fixed
		top: 50px
		bottom: 55px
		left: 0
		right: 0
		z-index: 999
		width: auto
		height: auto
	
	.move-enter-active, .move-leave-active
		transiti(all, 0.4s, ease)
	.move-enter
		transform: translate3d(100%, 0, 0)
	.move-leave
		transform: translate3d(0, 0, 0)
</style>